Notionでの「カラムレイアウト」作成がスラッシュコマンドで超簡単に出来るようになりました！ #notion

Webページデザインにおいて「マルチカラムレイアウト」は良く利用されるかと思いますが、Notionでも(Notionの仕組みを利用して)この「カラムレイアウト」を実現することが出来ます。

• WEBデザインでよく聞く「カラム」について デザイン-新潟のホームページ制作会社 (株)アテンド
• 情報量が多いサイトにおすすめ 最新版マルチカラムレイアウト | ウェブラボ（株）スタッフブログ

任意のブロック(空でも何か入っていても大丈夫です)を複数用意し、

そのうちの一つをドラッグして横に持っていくことで

ブロックの境界線(？)が横に表示されるようになります。このタイミングでドロップすると

ブロックを横に配置されるようになり、カラムレイアウトの下地が出来ました。

ただこのケースの場合、上記のような操作をしなければならないのでちょっと面倒ではあります。 若干の手間を感じていながらも、この手法を使ってページ構成にカラムレイアウトを採用していたのですが、この度「カラムレイアウト」を超簡単に手早く出来る機能がリリースされたようです！

当エントリではその方法について内容を紹介したいと思います。

　

カラムレイアウトを実現するスラッシュコマンド「/columns」(計4パターン)

今回紹介する新しい機能はスラッシュコマンド「/columns」です。スラッシュコマンド自体については下記公式ドキュメントをご参照ください。ざっくりいうとページ上でマウス操作を行わずに、コマンドを入力する形でやりたいことを実現出来る、Notion側で用意されている便利コマンドです。

• スラッシュコマンド - キーボードショートカット

試しにコマンドを打ち込んでみます。すると4つの候補が現れました。現状では2列〜5列を選択出来るようです。

カラムレイアウトで実現したい列数が予め決まっている場合は/数字(2〜5) columnsでも選択肢を出すことが出来ます。ここでは3列カラムレイアウトを指定してみました。

すると以下のようにブロックが3列縦に並ぶ形で配置されました！該当箇所を範囲選択することで「指定したブロック配置が為されていること」は確認出来ているのですが、念の為そのブロック群に背景色を付けてみます。

結果、こうなりました。あとは配置したブロックに対して見出し項目なりテキスト項目なりを流し込んでいけばOKです。

カラムレイアウトにテキストなどを流し込んで見た例です。それぞれに見出しとテキスト、ブロック要素を入れてみています。また、ネタ的には3列...3人...でふと思い付いたものを入れてみました。

　

まとめ

というわけで、Notionにおける(マルチ)カラムレイアウトを素早く簡単に実現できるスラッシュコマンドの紹介でした。

Notionにおけるコンテンツの整理を行う上で、「カラムレイアウト」はとても強力かつ有効に働きます。実際にページ作成、レイアウト調整を行う際にはこのスラッシュコマンドを最大限活用してスピードアップと効率化を図って頂けますと幸いです。

• Notion の記事一覧 | DevelopersIO